<template>
    <div class="paperList">
        <div class="item" v-for="(item, index) in list" :key="index">
            <i class="el-icon-tickets"></i>
            <div style="width: 60%;">
                <div class="title">{{ item.title }}</div>
                <div class="time" v-if="item.startTime">
                    <div v-if="new Date().getTime() - new Date(item.startTime).getTime() < 0">开始时间：{{ dayjs(item.startTime).format('MM-DD HH:mm') }}</div>
                    <div v-else>开始时间：已开始</div>
                    <div v-if="new Date().getTime() - new Date(item.endTime).getTime() < 0">结束时间：{{ dayjs(item.endTime).format('MM-DD HH:mm') }}</div>
                    <div v-else>结束时间：已结束</div>
                </div>
                <div><el-link type="primary" @click="openPaper(item.id)">做题</el-link></div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import { mapMutations } from 'vuex'
    export default {
        props : ['list'],
        computed : {
            ...mapState(['types'])
        },
        methods : {
            ...mapMutations(['openPaper']),
        }
    }
</script>

<style lang="scss" scoped>
.paperList{
    display: flex;
    flex-wrap: wrap;
    .item{
        width: calc(100% - 20px);
        max-width: 280px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        display: flex;
        padding: 20px 0;
        margin: 10px;
        justify-content: center;
        align-items: center;
        color: #333;
        border-radius: 10px;
        i{
            font-size: 95px;
            color: var(--bcolor);
            opacity: 0.4;
        }
        .time{
            font-size: calc(10px + 0.1vw);
        }
        .title{
            font-size: calc(10px + 0.2vw);
            margin-bottom: 10px;
        }
    }
}
</style>